import React from 'react'
import './index.css'


export default function Footer({todoList, setTodoList}) {
  // 第十五步：计算已完成的个数
const getCheckedNum =()=>{//reduce第一个参数是一个函数，第二个参数为初始值，第一个参数中函数接受的形参第一个为上一次的值(首次执行拿初始值 非首次执行拿return 后面的值)，第二个参数为数组的每一项，第三个参数为下标
  return todoList.reduce((p,c)=>c.done?p+1:p,0)//遍历数组，如果done为true 就加1
}
//第十六步：全选逻辑 当点击全选按钮后，把所有的数据的done都变成和全选按钮的checked状态一致
const checkedAllHandle =(e)=>{
 const newTodoList= todoList.map(item=>{
    return {...item,done:e.target.checked} 
  })
  setTodoList(newTodoList)
}

  return (
    <div className="todo-footer">
        <label>
          {/* 因为如果手动把所有数据都勾选了，希望全选按钮也自动勾选，当数据全部清空时，全选按钮不勾选，所以要做个判断 */}
          <input type="checkbox" onChange={checkedAllHandle} checked={getCheckedNum()===todoList.length&&todoList.length !== 0}/>
        </label>
        <span>
          <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
        </span>
        <button className="btn btn-danger">清除已完成任务</button>
      </div>
  )
}
